import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_devices/bruno/src/components/button/brn_normal_button.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'login_logic.dart';

class LoginView extends GetView<LoginLogic> {
  const LoginView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 50,
              alignment: Alignment.center,
              child: Text(
                '设备管理',
                style: StylesUtils.customTextStyle(
                    fontSize: 32, color: ColorsUtils.color0052),
              ),
            ),
            Container(
              height: 200,
              alignment: Alignment.center,
              margin: const EdgeInsets.only(top: 20, bottom: 30),
              child: Image.network(
                'https://img0.baidu.com/it/u=2054892144,2438300827&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                width: 200,
                height: 200,
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: (Get.width - 300) / 2),
              child: ListBody(
                children: [
                  Container(
                      height: 40,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '登录账号',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16, color: ColorsUtils.color3333),
                      )),
                  Container(
                    height: 40,
                    alignment: Alignment.centerLeft,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color: ColorsUtils.parseColorFromHexString(
                                    ColorsUtils.color9999)))),
                    child: Obx(() => TextField(
                          controller: ToolsUtils.editingController(
                              controller.username.value),
                          cursorColor: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color1c24),
                          style: StylesUtils.customTextStyle(
                              fontSize: 16, color: ColorsUtils.color1c24),
                          cursorWidth: 2,
                          cursorRadius: const Radius.circular(2),
                          decoration: InputDecoration(
                              hintText: '请输入账号',
                              hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorCccc, fontSize: 15),
                              isDense: true,
                              isCollapsed: true,
                              fillColor: Colors.white,
                              border: InputBorder.none,
                              focusColor: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.color1c24),
                              contentPadding:
                                  const EdgeInsets.symmetric(vertical: 20),
                              focusedBorder: InputBorder.none),
                          onChanged: (String text) {
                            controller.username.value = text;
                          },
                        )),
                  ),
                  Container(
                      height: 40,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '登录密码',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16, color: ColorsUtils.color3333),
                      )),
                  Container(
                    height: 40,
                    alignment: Alignment.centerLeft,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color: ColorsUtils.parseColorFromHexString(
                                    ColorsUtils.color9999)))),
                    child: Obx(() => TextField(
                          keyboardType: TextInputType.visiblePassword,
                          obscuringCharacter: '*',
                          controller: ToolsUtils.editingController(
                              controller.pwd.value),
                          cursorColor: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color1c24),
                          style: StylesUtils.customTextStyle(
                              fontSize: 16, color: ColorsUtils.color1c24),
                          cursorWidth: 2,
                          cursorRadius: const Radius.circular(2),
                          decoration: InputDecoration(
                              hintText: '请输入密码',
                              hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorCccc, fontSize: 15),
                              isDense: true,
                              isCollapsed: true,
                              fillColor: Colors.white,
                              border: InputBorder.none,
                              focusColor: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.color1c24),
                              contentPadding:
                                  const EdgeInsets.symmetric(vertical: 20),
                              focusedBorder: InputBorder.none),
                          onChanged: (String text) {
                            controller.pwd.value = text;
                          },
                        )),
                  ),
                  Container(
                    height: 40,
                    margin: const EdgeInsets.only(top: 20),
                    child: FractionallySizedBox(
                      child: BrnNormalButton(
                        onTap: () {
                          Get.back();
                        },
                        backgroundColor: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color0052),
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            offset: Offset.zero,
                            blurRadius: 5,
                            spreadRadius: 0,
                            color:
                                ColorsUtils.rgba(0, 82, 217, 0.568627450980392),
                          )
                        ]),
                        text: '确定',
                        textStyle: StylesUtils.customTextStyle(fontSize: 14),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
